﻿<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, address=no">
    <meta name="author" content="Storm">
    <title>人气/魅力排行榜</title>
    <script>
        (function (a, b, c) {
            'use strict';

            function e() {
                var e = d.clientWidth;
                e >= c ? e = c : a >= e && (e = a);
                d.style.fontSize = 100 * (e / b) + 'px'
            }

            var d = document.getElementsByTagName('html')[0];
            e();
            window.onresize = e
        }(320, 640, 640))
    </script>
    <link href="https://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/style.css">
    <script src="https://cdn.bootcss.com/angular.js/1.5.7/angular.min.js"></script>
</head>

<body>
<div class="wrapper" ng-app="leaderboard" ng-controller="leaderboard">

    <div class="swiper-pagination"></div>

    <!-- swiper -->
    <div class="swiper-container" id="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" id="ranking">

                <!-- 金牌 -->
                <div class="gold medal" ng-if="masterPopularRank.length > 0">
                    <div class="medal-img" ng-click="getUserInfo(masterPopularRank[0])"><img
                            ng-src="{{masterPopularRank[0].icon}}" alt="{{masterPopularRank[0].nickname}}"/><span
                            class="gold-crown"></span></div>
                    <p class="medal-title">{{masterPopularRank[0].nickname}}
                        <button ng-if="masterPopularRank[0].concern == 1" disabled type="button"
                                class="btn-attention">已关注
                        </button>
                        <button ng-if="masterPopularRank[0].concern == 0" type="button" class="btn-attention"
                                ng-click="getFocus(masterPopularRank[0])">关注
                        </button>
                    </p>
                    <p class="medal-code">喵号 {{masterPopularRank[0].platAcc}}</p>
                </div>
                <!-- /金牌 -->

                <!-- 银牌 -->
                <div class="silver medal" ng-if="masterPopularRank.length > 1">
                    <div class="medal-img" ng-click="getUserInfo(masterPopularRank[1])"><img
                            ng-src="{{masterPopularRank[1].icon}}" alt="{{masterPopularRank[1].nickname}}"/></div>
                    <p class="medal-title">{{masterPopularRank[1].nickname}}
                        <button ng-if="masterPopularRank[1].concern == 1" disabled type="button"
                                class="btn-attention">已关注
                        </button>
                        <button ng-if="masterPopularRank[1].concern == 0" type="button" class="btn-attention"
                                ng-click="getFocus(masterPopularRank[1])">关注
                        </button>
                    </p>
                    <p class="medal-code">喵号 {{masterPopularRank[1].platAcc}}</p>
                </div>
                <!-- /银牌 -->

                <!-- 铜牌 -->
                <div class="copper medal" ng-if="masterPopularRank.length > 2">
                    <div class="medal-img" ng-click="getUserInfo(masterPopularRank[2])"><img
                            ng-src="{{masterPopularRank[2].icon}}" alt="{{masterPopularRank[2].nickname}}"/></div>
                    <p class="medal-title">{{masterPopularRank[2].nickname}}
                        <button ng-if="masterPopularRank[2].concern == 1" disabled type="button"
                                class="btn-attention">已关注
                        </button>
                        <button ng-if="masterPopularRank[2].concern == 0" type="button" class="btn-attention"
                                ng-click="getFocus(masterPopularRank[2])">关注
                        </button>
                    </p>
                    <p class="medal-code">喵号 {{masterPopularRank[2].platAcc}}</p>
                </div>
                <!-- /铜牌 -->

                <!-- 人气榜列表 -->
                <ul class="list">
                    <li ng-repeat="master in masterPopularRank" ng-if="$index > 2" class="list-item">
                        <div class="list-num">{{$index+1}}</div>
                        <div class="list-img" ng-click="getUserInfo(master)"><img ng-src="{{master.icon}}" src=""
                                                                                  alt="{{master.nickname}}"/></div>
                        <div class="list-info">
                            <div class="list-name">{{master.nickname}}
                                <button ng-if="master.concern == 1" disabled type="button" class="btn-attention">已关注
                                </button>
                                <button ng-if="master.concern == 0" type="button" class="btn-attention"
                                        ng-click="getFocus(master)">关注
                                </button>
                            </div>
                            <div class="list-code">喵号 {{master.platAcc}}</div>
                        </div>
                    </li>
                </ul>
                <!-- /人气榜列表-->

            </div>

            <!--魅力榜-->
            <div class="swiper-slide" id="charm">

                <!-- 金牌 -->
                <div class="gold medal"  ng-if="masterCharmRank.length > 0">
                    <div class="medal-img" ng-click="getUserInfo(masterCharmRank[0])"><img src=""
                                                                                           ng-src="{{masterCharmRank[0].icon}}"
                                                                                           alt="{{masterCharmRank[0].nickname}}"/><span
                            class="gold-crown"></span></div>
                    <p class="medal-title">{{masterCharmRank[0].nickname}}
                        <button ng-if="masterCharmRank[0].concern == 1" disabled type="button" class="btn-attention">
                            已关注
                        </button>
                        <button ng-if="masterCharmRank[0].concern == 0" type="button" class="btn-attention"
                                ng-click="getFocus(masterCharmRank[0])">关注
                        </button>
                    </p>
                    <p class="medal-code">喵号 {{masterCharmRank[0].platAcc}}</p>
                </div>
                <!-- /金牌 -->

                <!-- 银牌 -->
                <div class="silver medal" ng-if="masterCharmRank.length > 1">
                    <div class="medal-img" ng-click="getUserInfo(masterCharmRank[1])"><img src=""
                                                                                           ng-src="{{masterCharmRank[1].icon}}"
                                                                                           alt="{{masterCharmRank[1].nickname}}"/>
                    </div>
                    <p class="medal-title">{{masterCharmRank[1].nickname}}
                        <button ng-if="masterCharmRank[1].concern == 1" disabled type="button" class="btn-attention">
                            已关注
                        </button>
                        <button ng-if="masterCharmRank[1].concern == 0" type="button" class="btn-attention"
                                ng-click="getFocus(masterCharmRank[1])">关注
                        </button>
                    </p>
                    <p class="medal-code">喵号 {{masterCharmRank[1].platAcc}}</p>
                </div>
                <!-- /银牌 -->

                <!-- 铜牌 -->
                <div class="copper medal" ng-if="masterCharmRank.length > 2">
                    <div class="medal-img" ng-click="getUserInfo(masterCharmRank[2])"><img src=""
                                                                                           ng-src="{{masterCharmRank[2].icon}}"
                                                                                           alt="{{masterCharmRank[2].nickname}}"/>
                    </div>
                    <p class="medal-title">{{masterCharmRank[2].nickname}}
                        <button ng-if="masterCharmRank[2].concern == 1" disabled type="button" class="btn-attention">
                            已关注
                        </button>
                        <button ng-if="masterCharmRank[2].concern == 0" type="button" class="btn-attention"
                                ng-click="getFocus(masterCharmRank[2])">关注
                        </button>
                    </p>
                    <p class="medal-code">喵号 {{masterCharmRank[2].platAcc}}</p>
                </div>
                <!-- /铜牌 -->

                <!-- 魅力榜列表 -->
                <ul class="list">
                    <li ng-repeat="master in masterCharmRank" ng-if="$index > 2" class="list-item">
                        <div class="list-num">{{$index + 1}}</div>
                        <div class="list-img" ng-click="getUserInfo(master)"><img ng-src="{{master.icon}}" src=""
                                                                                  alt="{{master.nickname}}"/></div>
                        <div class="list-info">
                            <div class="list-name">{{master.nickname}}
                                <button ng-if="master.concern == 1" disabled type="button" class="btn-attention">已关注
                                </button>
                                <button ng-if="master.concern == 0" type="button" class="btn-attention"
                                        ng-click="getFocus(master)">关注
                                </button>
                            </div>
                            <div class="list-code">喵号 {{master.platAcc}}</div>
                        </div>
                    </li>
                </ul>
                <!-- /魅力榜列表 -->

            </div>

            <!--/魅力榜-->
        </div>
    </div>
    <!-- /swiper -->

    <!-- rule -->
    <section class="rule">
        <div class="rule-title"><span>活动规则</span></div>

        <p>&nbsp;•&nbsp;人气榜：榜单根据主播关注增加数量统计得出排行，截取当天往前30天内数据（不包括当天）本活动最终解释权归游戏猫所有。</p>
        <p>&nbsp;•&nbsp;魅力榜：榜单根据主播喵粮增加数量统计得出排行，截取当天往前30天内数据（不包括当天）本活动最终解释权归游戏猫所有。</p>
        <p>&nbsp;•&nbsp;本活动最终解释权归游戏猫全民直播所有。</p>
    </section>
    <!-- /rule -->

    <!-- 关注失败 -->
    <div class="popup failure" ng-hide="failureHide">
        <div class="popup-backdrop"></div>
        <div class="popup-content">
            <a href="javascript:;" ng-click="failureHide = true" class="popup-close"><span
                    class="icon icon-close"></span></a>
            <div class="popup-body">{{failureMsg}}</div>
            <div class="popup-footer">
                <button ng-click="failureHide = true" type="button" class="popup-btn popup-primary">确定</button>
            </div>
        </div>
    </div>
    <!-- /关注失败 -->

    <!-- 个人资料 -->
    <div class="popup info" ng-hide="infoHide">
        <div class="popup-backdrop"></div>
        <div class="popup-content">
            <a href="javascript:;" ng-click="infoHide = true" class="popup-close"><span class="icon icon-close"></span></a>
            <div class="popup-body">
                <div class="info-img"><img ng-src="{{master.icon}}" src="../upload/1111.png" alt="master.nickName"/>
                </div>
                <div class="info-name">{{master.nickName}}</div>
                <div class="info-tag">
                    <span ng-if="master.sex == 2" class="icon icon-female"></span>
                    <span ng-if="master.sex == 1" class="icon icon-male"></span>
                    <span class="level">LV.{{master.masterLevel}}</span>
                </div>
                <div class="info-code">喵号: &nbsp;{{master.platAcc}}</div>
                <div class="info-text">
                    <div>粉丝: &nbsp;{{master.fanNum}}</div>
                    <div>关注: &nbsp;{{master.subNum}}</div>
                    <div>送出: &nbsp;{{master.sendXiuBi}}</div>
                    <div>喵粮: &nbsp;{{master.gainXiuDou}}</div>
                </div>
            </div>
            <div class="popup-footer">
                <button ng-if="master.concern == 0" ng-click="penalGetFocus(master)" type="button"
                        class="popup-btn popup-primary">关注
                </button>
            </div>
        </div>
    </div>
    <!-- /个人资料 -->

    <!-- loading -->
    <div ng-show="loading" class="loading"></div>
    <!-- /loading -->

</div>
<script src="https://cdn.bootcss.com/Swiper/3.3.1/js/swiper.min.js"></script>
<script>
    (function (angular) {
        var local = false;  //是否是本地环境 ,后端环境改成 false
        var method = 'get';

        if (local) {
            var
            // masterPopularRank = 'm/masterPopularRank.action',
                    masterPopularRank = '../json/masterPopularRank.json', //人气榜接口
            // masterCharmRank = 'm/getMasterCharmRank.action',
                    masterCharmRank = '../json/masterCharmRank.json', //魅力榜接口
            // getRoomUserInfo = 'm/getRoomUserInfo.action',
                    getRoomUserInfo = '../json/info.json', //主播信息接口
            // getFocusAction = '/m/focus.action',
                    getFocusAction = '../json/focus.json'; //关注接口
        } else {
            var
            // masterPopularRank = 'm/masterPopularRank.action',
                    masterPopularRank = 'm/masterPopularRank.action', //人气榜接口
            // masterCharmRank = 'm/getMasterCharmRank.action',
                    masterCharmRank = 'm/getMasterCharmRank.action', //魅力榜接口
            // getRoomUserInfo = 'm/getRoomUserInfo.action',
                    getRoomUserInfo = 'm/getRoomUserInfo.action', //主播信息接口
            // getFocusAction = '/m/focus.action',
                    getFocusAction = '/m/focus.action'; //关注接口
        }


        //滑动切换
        var swiper = new Swiper('#swiper-container', {
            resistanceRatio: 0,
            pagination: '.swiper-pagination',
            parallax: true,
            paginationClickable: true,
            resistance: '100%',
            speed: 300,
            paginationBulletRender: function (index, className) {
                var name;
                switch (index) {
                    case 0:
                        name = '主播人气榜';
                        className += ' ranking-btn';
                        break;
                    case 1:
                        name = '主播魅力榜';
                        className += ' charm-btn';
                        break;
                    default:
                        name = '';
                }
                return '<div class="' + className + '">' + name + '</div>';
            }
        });

        var app = angular.module('leaderboard', []);
        app.controller('leaderboard', function ($scope, $http) {

            $scope.failureHide = true; //关注失败弹出框
            $scope.infoHide = true; //信息弹出框
            $scope.loading = true;

            //封装ajax请求
            var ajax = function (action, data, callback) {

                return $http[method](action, data)
                        .success(function (req) {
                            if (req.code === '000000') {
                                callback(req.data);
                            } else {
                                $scope.failureHide = false;
                                $scope.infoHide = true; //退出弹出框
                                $scope.failureMsg = req.msg;

                            }
                        })
                        .error(function () {
                            $scope.failureHide = false;
                            $scope.infoHide = true; //退出弹出框
                            $scope.failureMsg = '网络错误请重试';

                        });
            };

            // 直播人气榜
            ajax(masterPopularRank, {}, function (data) {
                $scope.loading = false;
                $scope.masterPopularRank = data.masterPopularRank; //人气主播列表

            });

            // 直播魅力榜
            ajax(masterCharmRank, {}, function (data) {
                $scope.loading = false;
                $scope.masterCharmRank = data.masterCharmRank; //魅力主播列表

            });

            // 获取直播个人信息
            $scope.getUserInfo = function (master) {
                //获取主播而信息
                ajax(getRoomUserInfo+"?userId="+master.masterId, {
                }, function (data) {
                    $scope.infoHide = false;
                    $scope.master = data;
                    $scope.master.m = master;
                })
            };

            // 关注主播
            $scope.getFocus = function (master) {
                //关注请求
                $http.post(getFocusAction+"?masterId="+master.masterId, {}).success(function(data){
                    if(data.code == '000000'){
                        master.concern = 1;
                    }
                });
            }

            $scope.penalGetFocus = function (master) {
                //关注请求
                $http.post(getFocusAction+"?masterId="+master.masterId, {
                }).success(function(data){
                    if(data.code == '000000'){
                        $scope.master.m.concern = 1;
                        $scope.infoHide = true;
                    }
                });
            }
        });
    }(angular));
</script>
</body>

</html>